<template>
  <el-form :inline="true" :model="data" class="demo-form-inline">	
    <el-form-item label="颜色名称">
      <el-input v-model="data.goodscolor" placeholder=""></el-input>
    </el-form-item>
	
    <el-form-item>
      <el-button type="danger" @click="deleteList">删除</el-button>
    </el-form-item>
	<el-row :gutter="20">
	    <el-col :span="12">
			  <div>
			  	 <span class="demonstration pb20">颜色小图标</span>
			  	 <el-upload class="avatar-uploader" :action="`${api}/index.php/index/goods/aliuploadfile`"
			  	 	:show-file-list="false" :on-success="handleColorimg">
			  	 	<img v-if="data.colorimg"  :src="ifImgHeader(data.colorimg)" class="avatar" />
			  	 	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			  	 </el-upload>
			  </div>
		</el-col>	
	    <el-col :span="12">
			 <div>
			 	 <span class="demonstration pb20">颜色车型图</span>
			 	 <el-upload class="avatar-uploader" :action="`${api}/index.php/index/goods/aliuploadfile`"
			 	 	:show-file-list="false" :on-success="handleGoodsimg">
			 	 	<img v-if="data.goodsimg"  :src="ifImgHeader(data.goodsimg)" class="avatar" />
			 	 	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			 	 </el-upload>
			 </div>
	    </el-col>
	</el-row>
	
  </el-form>
</template>

<script lang="ts">
export default {
  props:["data",'index'],
  watch:{
  	 data : {//深度监听，可监听到对象、数组的变化
  	            handler(val, oldVal){
  					
  	                console.log(this.data);//但是这两个值打印出来却都是一样的
  	            },
  	            deep:true,
  				immediate: true,
  	        }
  	
  },
  methods: {
	  deleteList(){	
	  	this.$emit('deleteList',this.index)	  
	  },
	handleColorimg(file){
		this.$emit('handleColorimg',{
			colorimg:file.data,
		index:this.index})
	},
	handleGoodsimg(file){
		this.$emit('handleGoodsimg',{
			goodsimg:file.data,
		    index:this.index})
	},
    onSubmit() {
      console.log('submit!')
    },
  },
}
</script>
<style type="text/css" scoped>
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 200px;
		
		text-align: center;
	}
	
	.avatar {
		width: 200px;
		
		display: block;
	}
</style>